<template>
  <view class="coupon-center">
    <!-- SVG 弧形背景 -->
    <svg class="arc-svg" viewBox="0 0 100 30" preserveAspectRatio="none">
      <path 
        d="M0 0 V20 Q50 30 100 20 V0 Z" 
        fill="#FB5F2E" 
      />
    </svg>
    <view class="page-title">
      <text>领券中心</text>
    </view>
    <!-- 顶部 banner 区域 -->
    <view class="banner-wrap">
      <image 
        class="top-banner" 
        src="/static/getCouponCenter/title.png" 
        mode="widthFix"
      ></image>
    </view>

    <!-- 通用神券区域 -->
    <view class="section">
      <view class="section-title">
        <text class="title-icon"></text>
        <text class="title-text">通用神券</text>
      </view>
      <scroll-view class="coupon-scroll" scroll-x="true" show-scrollbar="false">
        <view class="coupon-list common-coupon">
          <view 
            class="coupon-item" 
            v-for="(item, index) in commonCoupons" 
            :key="index"
          >
            <view class="coupon-amount">
              <text class="price">¥{{ item.price }}</text>
              <text class="condition">满{{ item.full }}元可用</text>
              <text class="desc">全品类商品通用</text>
              <view class="progress-bar">
                <view class="progress" :style="{ width: item.rate }"></view>
                <text class="progress-text">已抢{{ item.rateText }}</text>
              </view>
            </view>
            <button class="get-btn" hover-class="get-btn-hover">立即领取</button>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 推荐好券区域 -->
    <view class="section recommend-section">
      <view class="section-title">
        <text class="title-icon"></text>
        <text class="title-text">推荐好券</text>
      </view>
      <view class="coupon-list recommend-coupon">
        <view 
          class="coupon-item" 
          v-for="(item, index) in recommendCoupons" 
          :key="index"
        >
          <!-- 店铺信息 + 商品列表 + 优惠券信息 横向布局 -->
          <view class="coupon-row">
            <!-- 左侧：店铺 + 商品 -->
            <view class="coupon-left">
              <view class="store-info">
                <image 
                  class="store-logo" 
                  :src="item.storeLogo" 
                  mode="aspectFill"
                ></image>
                <text class="store-name">{{ item.storeName }}</text>
              </view>
              <view class="goods-list">
                <view class="goods-item" v-for="(goods, gIndex) in item.goods" :key="gIndex">
                  <image 
                    class="goods-img" 
                    :src="goods.img" 
                    mode="aspectFill"
                  ></image>
                  <text class="goods-price">¥{{ goods.price }}</text>
                </view>
              </view>
            </view>
            <!-- 右侧：优惠券信息 -->
            <view class="coupon-right">
              <text class="coupon-price">¥{{ item.couponPrice }}</text>
              <text class="coupon-condition">满{{ item.full }}元可用</text>
              <view class="coupon-progress-bar">
                <view class="coupon-progress" :style="{ width: item.rate }"></view>
                <text class="coupon-progress-text">已抢{{ item.rateText }}</text>
              </view>
              <button 
                class="get-btn" 
                hover-class="get-btn-hover" 
                :disabled="item.isSoldOut"
              >
                {{ item.isSoldOut ? '已抢光' : '立即领取' }}
              </button>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 通用神券数据
      commonCoupons: [
        { price: 17, full: 18, rate: '6%', rateText: '6%' },
        { price: 11, full: 66, rate: '1%', rateText: '1%' },
        { price: 25, full: 50, rate: '15%', rateText: '15%' },
        { price: 8, full: 30, rate: '3%', rateText: '3%' }
      ],
      // 推荐好券数据
      recommendCoupons: [
        {
          storeLogo: '/static/images/store_logo.png',
          storeName: 'Mall4j蓝海商城',
          goods: [
            { img: '/static/getCouponCenter/img1.png', price: 69 },
            { img: '/static/getCouponCenter/img2.png', price: 7 },
            { img: '/static/getCouponCenter/img3.png', price: 79 }
          ],
          couponPrice: 10,
          full: 100,
          rate: '86%',
          rateText: '86%',
          isSoldOut: false
        },
        {
          storeLogo: '/static/images/store_logo.png',
          storeName: 'Mall4j蓝海商城',
          goods: [
            { img: '/static/getCouponCenter/img1.png', price: 69 },
            { img: '/static/getCouponCenter/img2.png', price: 7 },
            { img: '/static/getCouponCenter/img3.png', price: 79 }
          ],
          couponPrice: 99.99,
          full: 100,
          rate: '100%',
          rateText: '已抢光',
          isSoldOut: true
        }
      ]
    };
  }
};
</script>

<style lang="scss">
// 导航栏样式调整
page {
  navigation-bar {
    background-color: "#FFFFFF" !important;
  }
}

.page-title {
  position: absolute;
  top: -35px; 
  left: 50%;
  transform: translateX(-50%);
  z-index: 2; 
  font-size: 18px;
  font-weight: bold;
  color: #fff; 
}

.coupon-center {
  position: relative;
  background-color: #f5f5f5;
  padding-top: 30px; 

  .arc-svg {
    position: absolute;
    top: -60px; 
    left: 0;
    width: 100%;
    height: 130px; 
    z-index: 1;
  }
  
  .banner-wrap {
    position: relative; 
    z-index: 2; 
    padding: 20px 16px 0; 
    display: flex;
    justify-content: center;
    margin-bottom: -10px; 

    .top-banner {
      top: -40px;
      width: 100%;
      border-radius: 12px;
    }
  }

  .section {
    background-color: #fff;
    border-radius: 12px;
    margin: 12px;
    top: -30px;
    padding: 12px;
    position: relative;
    z-index: 2;

    .section-title {
      display: flex;
      align-items: center;

      .title-icon {
        display: inline-block;
        width: 6px;
        height: 16px;
        background-color: #f30;
        border-radius: 3px;
        margin-right: 8px;
      }

      .title-text {
        font-size: 16px;
        font-weight: bold;
        color: #333;
      }
    }
  }

      .coupon-list {
      margin-top: 0px;
    }

  // 通用神券样式
  .coupon-scroll {
    white-space: nowrap;
    margin-top: 12px;
  }

  .common-coupon {
    display: flex;
    padding: 0 8px;

    .coupon-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 160px;
      margin-right: 10px;
      background-color: #fff;
      border: 1px solid #eee;
      border-radius: 8px;
      padding: 12px;
      box-sizing: border-box;
      flex-shrink: 0;

      &:last-child {
        margin-right: 0;
      }

      .coupon-amount {
        text-align: center;
        width: 100%;

        .price {
          font-size: 20px;
          color: #f30;
          font-weight: bold;
          display: block;
        }

        .condition {
          font-size: 11px;
          color: #666;
          margin-top: 3px;
          display: block;
        }

        .desc {
          font-size: 11px;
          color: #999;
          margin-top: 2px;
          display: block;
        }

        .progress-bar {
          width: 100%;
          height: 4px;
          background-color: #f5f5f5;
          border-radius: 2px;
          margin-top: 6px;
          overflow: hidden;

          .progress {
            height: 100%;
            background-color: #f30;
          }

          .progress-text {
            display: block;
            margin-top: 3px;
            font-size: 11px;
            color: #999;
          }
        }
      }

      .get-btn {
        margin-top: 8px;
        background-color: #f30;
        color: #fff;
        border-radius: 16px;
        padding: 6px 16px;
        font-size: 12px;
        width: 100%;
        border: none;
        line-height: 1.2;
      }
    }
  }

  // 推荐好券样式（修复后）
  .recommend-section {
    .coupon-item {
      background: transparent;
      border: none;
      padding: 0;
      margin-bottom: 12px;
    }

    .coupon-row {
      display: flex;
      align-items: center;
      background: #fff;
      border: 1px solid #eee;
      border-radius: 10px;
      padding: 12px;
      box-sizing: border-box;
    }

    .coupon-left {
      display: flex;
      flex-direction: column;
      flex: 1;
      margin-right: 12px;
    }

    .store-info {
      display: flex;
      align-items: center;
      margin-bottom: 8px;

      .store-logo {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        margin-right: 6px;
      }

      .store-name {
        font-size: 14px;
        color: #333;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    .goods-list {
      display: flex;
      justify-content: space-between;

      .goods-item {
        width: 31%;
        text-align: center;

        .goods-img {
          width: 100%;
          height: 60px;
          border-radius: 6px;
        }

        .goods-price {
          font-size: 12px;
          color: #999;
          margin-top: 3px;
          display: block;
        }
      }
    }

    .coupon-right {
      width: 120px;
      display: flex;
      flex-direction: column;
      align-items: flex-end;

      .coupon-price {
        font-size: 18px;
        color: #f30;
        font-weight: bold;
        line-height: 1;
      }

      .coupon-condition {
        font-size: 12px;
        color: #666;
        margin-top: 4px;
        line-height: 1;
      }

      .coupon-progress-bar {
        width: 100%;
        height: 6px;
        background-color: #f5f5f5;
        border-radius: 3px;
        margin-top: 4px;
        overflow: hidden;

        .coupon-progress {
          height: 100%;
          background-color: #f30;
        }

        .coupon-progress-text {
          display: block;
          margin-top: 4px;
          font-size: 12px;
          color: #999;
          line-height: 1;
          text-align: right;
        }
      }

      .get-btn {
        margin-top: 8px;
        background-color: #f30;
        color: #fff;
        border-radius: 20px;
        padding: 6px 15px;
        font-size: 12px;
        line-height: 1;
      }

      .get-btn[disabled] {
        background-color: #ccc;
        color: #999;
      }
    }
  }

  .get-btn-hover {
    opacity: 0.8;
  }
}
</style>
